<template>
    <div class="ele-body">
        <el-card shadow="never">
            <Search @search="reload" />
            <ele-pro-table ref="table" :columns="columns" :datasource="datasource" :selection.sync="selection"
                :headerEllipsis="false" cache-key="appTable">
                <!-- 表头工具栏 -->
                <template v-slot:toolbar>
                    <el-button size="small" type="primary" icon="el-icon-plus" class="ele-btn-icon" @click="openEdit()">
                        新建
                    </el-button>
                    <el-button size="small" type="danger" icon="el-icon-delete" class="ele-btn-icon"
                        :disabled="!selection.length" @click="removeBatch">
                        批量删除
                    </el-button>
                </template>
                <!-- 类型列 -->
                <template v-slot:gather="{ row }">
                    {{ row.gather === 0 ? "采集当天" : (row.gather == 1 ? '采集本周' : '采集所有') }}
                </template>
                <template v-slot:type="{ row }">
                    {{ row.type === 1 ? "推荐" : "破解" }}
                </template>
                <!-- 状态列 -->
                <template v-slot:status="{ row }">
                    {{ row.status === 0 ? "关闭" : "开启" }}
                </template>
                <!-- 操作列 -->
                <template v-slot:action="{ row }">
                    <el-link type="primary" :underline="false" @click="openEdit(row)">
                        修改
                    </el-link>
                    <el-popconfirm class="ele-action" title="确定要删除此应用吗？" @confirm="remove(row)">
                        <template v-slot:reference>
                            <el-link type="danger" :underline="false">
                                删除
                            </el-link>
                        </template>
                    </el-popconfirm>
                </template>
            </ele-pro-table>
            <Edit :visible.sync="showEdit" :data="current" @done="reload" />
        </el-card>
    </div>
</template>

<script>
import { pageGathers, removeGather, removeGathers } from '@/api/gatherList';
import Search from './components/search.vue';
import Edit from './components/edit.vue';
import { formatDate } from "@/utils/formate";
export default {
    name: 'GatherTable',
    components: { Search, Edit },
    data() {
        return {
            // 当前编辑数据
            current: null,
            // 是否显示编辑弹窗
            showEdit: false,
            // 表格列配置
            columns: [
                {
                    columnKey: 'selection',
                    type: 'selection',
                    width: 45,
                    align: 'center',
                    fixed: 'left'
                },
                {
                    columnKey: 'index',
                    type: 'index',
                    label: '序号',
                    width: 50,
                    align: 'center',
                    fixed: 'left',
                },
                {
                    prop: '_id',
                    label: '编号',
                    align: 'center',

                    // width: 150
                },
                {
                    prop: 'name',
                    label: '资源名称',
                    align: 'center',
                    width: 90,
                    showOverflowTooltip: true
                },
                {
                    prop: 'apiUrl',
                    label: '接口地址',
                    align: 'center',
                },
                {
                    prop: 'data',
                    label: '参数',
                    align: 'center',
                    // width: 150,
                    showOverflowTooltip: true
                },
                {
                    prop: 'time',
                    label: '采集时间（几点）',
                    align: 'center',
                },
                {
                    prop: 'count',
                    label: '采集总数',
                    align: 'center',
                    sortable: 'custom',
                },
                {
                    prop: 'gather',
                    label: '采集',
                    align: 'center',
                    slot: 'gather'
                },
                {
                    prop: 'status',
                    label: '状态',
                    align: 'center',
                    slot: 'status'
                },
                {
                    prop: 'lastTime',
                    label: '上一次采集时间',
                    align: 'center',
                    // width: 100,
                   formatter: (row) => row.lastTime ? formatDate(new Date(row.lastTime)) : ''
                },
                {
                    prop: 'createTime',
                    label: '创建时间',
                    sortable: 'custom',
                    showOverflowTooltip: true,
                    minWidth: 110,
                    formatter: (row) => row.createTime ? formatDate(new Date(row.createTime)) : ''
                },
                {
                    prop: 'updateTime',
                    label: '修改时间',
                    sortable: 'custom',
                    showOverflowTooltip: true,
                    minWidth: 110,
                    formatter: (row) => row.updateTime ? formatDate(new Date(row.updateTime)) : ''
                },
                {
                    columnKey: 'action',
                    label: '操作',
                    width: 120,
                    align: 'center',
                    resizable: false,
                    slot: 'action',
                    showOverflowTooltip: true
                }
            ],
            // 表格选中数据
            selection: []
        };
    },
    methods: {
        /* 表格数据源 */
         datasource({ page, limit, where, order }) {
            return pageGathers({ ...where, ...order, page, limit })
        },
        /* 刷新表格 */
        reload(where) {
            this.$refs.table.reload({ page: 1, where: where });
        },
        /* 打开编辑弹窗 */
        openEdit(row) {
            this.current = row;
            this.showEdit = true;
        },
        /* 删除 */
        remove(row) {
            // const loading = this.$loading({ lock: true });
            removeGather({ ids: [row._id] })
                .then((msg) => {
                    // loading.close();
                    console.log(33333, msg);
                    this.$message.success(msg);
                    this.reload();
                })
                .catch((e) => {
                    // loading.close();
                    this.$message.error(e.message);
                });
        },
        /* 批量删除 */
        removeBatch() {
            this.$confirm('确定要删除选中的应用吗?', '提示', {
                type: 'warning'
            })
                .then(() => {
                    const loading = this.$loading({ lock: true });
                    let ids = this.selection.map((d) => d._id)
                    removeGathers({ ids })
                        .then((msg) => {
                            loading.close();
                            this.$message.success(msg);
                            this.reload();
                        })
                        .catch((e) => {
                            loading.close();
                            this.$message.error(e.message);
                        });
                })
                .catch(() => { });
        },
        /**
         * 时间格式化
         * @param date
         */
        doFormatDate(date) {
            return date ? formatDate(new Date(date)) : "";
        },
        /**
         * 获取点击数量
         * @param daysData
         * @param time
         * @param startTime
         */
        onGetClick(daysData, time, startTime = 0) {
            let num = 0;
            if (daysData && JSON.stringify(daysData) !== "{}") {
                for (let i = startTime; i < time; i++) {
                    let day = utils.formatDate(new Date(new Date().getTime() - (1000 * 60 * 60 * 24 * i)), "yyyy-MM-dd")
                    if (daysData[day]) num += daysData[day].click || 0;
                }
            }
            return num;
        }
    }
};
</script>